<template>
    <div class="course">
        <h1>课程 </h1>
        <van-nav-bar title="特色课">
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>
        <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1">
                <div style="padding: 5px 16px;">
                    <van-button  block round @click="onConfirm">
                        重置
                    </van-button>
                    <van-button type="danger" block round @click="ok">
                        确定
                    </van-button>
                </div>
                </van-dropdown-item>

            <van-dropdown-item v-model="value2"   :options="option2" />
            <van-dropdown-item v-model="value3"   :options="option3" >
<van-button block round @click="onConfirm">
    全部
</van-button>
<van-button block round @click="ok">
    大班课
</van-button>
                </van-dropdown-item>
        </van-dropdown-menu>
        <navBottom></navBottom>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value1: 'a',
            value2: 0,
            value3:'b',
            option1: [{ text: '分类', value: 'a' }],
            option2: [
                { text: '综合排序', value: 0 },
                { text: '最新', value: 1 },
                { text: '最热', value: 2 },
                { text: '价格从低到高', value: 3 },
                { text: '价格从高到低', value: 4 },
            ],
            option3: [{ text: '筛选', value: 'b' }],
        };
    },
    methods:{
        onConfirm() {
            this.$refs.item.toggle();
        },
        ok(){
            this.$refs.item.toggle();
        }
    }
}
</script>

<style>

</style>
